<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" > 
<head><title>Height</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="site.css"   media="all"    type="text/css" />
    <link rel="stylesheet" href="page.css"   media="all"    type="text/css" />
    <link rel="stylesheet" href="print.css"  media="print"  type="text/css" />
</head>

<body>
    <div class="main">
        <h1>Height</h1>

        <!-- inline box/element -->
        <div class="spacer"></div>
        <div> Note: <code>width</code> is independent from height.</div>
        <!-- label -->
        <div class="main_rows_padding">
            <div class="col1_label"> <code>height:auto;<br />width:150px;</code> </div>
            <div class="col2_label col_margin"> <code>height:65px;<br />width:100px;</code> </div>
            <div class="last_col_label col_margin"> <code>height:100%;<br />width:100px;</code> </div>
        </div>
        <div class="main_rows main_rows_padding">
            <div class="col_1_box">
                <img class="replaced_inline_shrinkwrapped box" src="star.gif" alt="star"><code>height:auto;</code></img>
                applies to what is enclosed in blue.
            </div>
            <div class="col_2 col_margin">
                <img class="replaced_inline_sized box" src="star.gif" alt="star" />
            </div>
            <div class="col_3 col_margin">
                <img class="replaced_inline_stretched box" src="star.gif" alt="star" />
            </div>
        </div>

        <!-- inline-block box/element -->
        <div class="spacer"></div>
        <!-- label -->
        <div class="main_rows_padding">
            <div class="col1_label"> <code>height:auto;</code> </div>
            <div class="col2_label col_margin"> <code>height:65px;</code> </div>
            <div class="last_col_label col_margin"> <code>height:100%;</code> </div>
        </div>
        <div class="main_rows main_rows_padding">
            <div class="col_1_box">
                <span class="inline_block_auto box">Inline-Block Auto (shrinkwrapped)</span>
            </div>
            <div class="col_2 col_margin">
                <span class="inline_block_sized box">Inline-Block Sized</span>
            </div>
            <div class="col_3 col_margin">
                <span class="inline_block_100_pct box">Inline-Block 100% (stretched)</span>
            </div>
        </div>

        <!-- block box/element -->
        <div class="spacer"></div>
        <!-- label -->
        <div class="main_rows_padding">
            <div class="col1_label"> <code>height:auto;</code> </div>
            <div class="col2_label col_margin"> <code>height:65px;</code> </div>
            <div class="last_col_label col_margin"> <code>height:100%;</code> </div>
        </div>
        <div class="main_rows main_rows_padding">
            <div class="col_1_box">
                <div class="block_auto box">Block Auto (shrinkwrapped)</div>
            </div>
            <div class="col_2 col_margin">
                <div class="block_sized box">Block Sized</div>
            </div>
            <div class="col_3 col_margin">
                <div class="block_100_pct box">Block 100% (stretched)</div>
            </div>
        </div>

        <!-- table box/element -->
        <div class="spacer"></div>
        <!-- label -->
        <div class="main_rows_padding">
            <div class="col1_label"> <code>height:auto; </div>
            <div class="col2_label col_margin"> <code>height:65px; </div>
            <div class="last_col_label col_margin"> <code>height:100%; </div>
        </div>
        <div class="main_rows main_rows_padding">
            <div class="col_1_box">
                <table class="table_auto box">
                    <tr><td>Table Auto (shrinkwrapped)</td></tr>
                </table>
            </div>
            <div class="col_2 col_margin">
                <table class="table_sized box">
                    <tr><td>Table Sized</td></tr>
                </table>
            </div>
            <div class="col_3 col_margin">
                <table class="table_100_pct box">
                    <tr><td>Table 100% (stretched)</td></tr>
                </table>
            </div>
        </div>

        <!-- float box -->
        <div class="spacer"></div>
        <!-- label -->
        <div class="main_rows_padding">
            <div class="col1_label"> <code>height:auto;<br />float:left;</code> </div>
            <div class="col2_label col_margin"> <code>height:65px;<br />float:left;</code> </div>
            <div class="last_col_label col_margin"> <code>height:100%;<br />float:left;</code> </div>
        </div>
        <div class="main_rows main_rows_padding">
            <span  class="float_auto box">Float Auto (shrinkwrapped)</span>
            <span  class="float_sized box">Float Sized</span>
            <span  class="float_100_pct box">Float 100% (stretched)</span>
        </div>
        
        <!-- absolute box -->
        <div class="spacer"></div>
        <!-- label -->
        <div class="main_rows_padding">
            <div class="col1_label"> <code>height:auto;<br />bottom:auto;</code> </div>
            <div class="col2_label col_margin"> <code>height:65px;<br />bottom:auto;</code> </div>
            <div class="col2_label col_margin"> <code>height:100%;<br />bottom:NA;</code> </div>
            <div class="last_col_label col_margin">
                <code>height:auto;<br />bottom:0px;</code><br />
            </div>
        </div>
        <div class="main_rows main_rows_padding">
            <div id="div5" class="div5_container">
                <span  class="absolute_auto_bottom_auto box">Absolute Auto (shrinkwrapped)</span>
                <span  class="absolute_sized box">Absolute Sized</span>
                <span  class="absolute_100_pct_bottom_0 box">Absolute 100% (stretched)</span>
                <span  class="absolute_auto_bottom_0 box">Absolute Auto (fitted-stretched)</span>
            </div>
        </div>
        <div class="main_rows_padding">
            <div class="col1_label">&nbsp;</div>
            <div class="col2_label col_margin">&nbsp;</div>
            <div class="col2_label col_margin">&nbsp;</div>
            <div class="last_col_label col_margin">
                Note: <code>bottom</code> affects this box because it is <code>position:absolute</code> and has nothing to do
                with the fact that <code>height</code> may be <code>auto</code> or <code>100%</code>
            </div>
        </div>
    </div>
</body>
</html>
